<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
		<script type="text/javascript" src="../../js/jquery/jquery.autocomplete.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/textarea/ctp.ui.textarea.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/form/ctp.form.js">	
		</script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">			
		</script>		
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>		
        <link href="../../css-debug/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css-debug/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css-debug/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/textarea.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/combobox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/label.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/form.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/validator.css" rel="stylesheet" type="text/css"/>
		
		<script type='text/javascript' kind='variant'>		  
		     //================================UI变量定义片段=========================================================
			 var validator;//验证框架
             var userName;//员工名称
             var birthDate;//出生年月
             var university;//毕业院校
             var sex;//性别
             var interest;//个人爱好
             var formLayout;//表单布局器  
             var personPanel;//个人信息面板   
             var personForm;//表单
             var button1,button2,button3,button4,button5,button6,button7,button8;//测试按钮
             var testPanel; //测试面板 
             var showGroupbox;//展示区groupbox
             var buttonsLayout;//测试区布局器
             var buttonsGroupbox;//测试区groupbox                      
        </script>
	    <script type='text/javascript' kind='event'>
            //================================函数定义片段============================================================
            /**
             * 表单提交函数
             * @version	 1.0
             * @since	 1.0
             * @author	kfzx-lixy01
             */
            function formSubmit(){
				//personForm.submit();   
				validator.submitValidate(); 
				//ttt = document.getElementById("userName");
				//ttt.select();
				  
            }
			/**
             * 表单重置函数
             * @version	 1.0
             * @since	 1.0
             * @author	kfzx-lixy01
             */
            function formReset(){
				personForm.reset();            
            }
		</script>
        <script>
        	//================================UI组件定义片段============================================================
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){
				validator = new ctp.validator({
					id:'validator',
					promptPosition:'bottomLeft',
					promptSucess:true,
					style:'simple'
				});			    		                 
                userName = new ctp.ui.textfield({
                    id: 'userName',
                    width: '100%', 
                    validate: 'rules[required,date]'
                });//员工名称
                birthDate = new ctp.ui.textfield({
                    id: 'birthDate',
                    width: '100%',
					validate: 'rules[required,email]'
                });//出生年月
                university = new ctp.ui.textfield({
                    id: 'university',
                    width: '100%'//,
					//validate: 'rules[required,length[1,30]]'
                });//毕业院校
                sex = new ctp.ui.combobox({
                    id: 'sex',
                    width: '100%',
                    editable: false,
					validate: 'rules[required]',
                    items: [{
                        text: '男',
                        value: '1'
                    }, {
                        text: '女',
                        value: '0'
                    }]
                });//性别
                interest = new ctp.ui.textarea({
                    id: 'interest',
					validate: 'rules[required]',
                    width: '100%'
                });//个人爱好
                
                formLayout = new ctp.ui.gridlayout({
					id:'formLayout',
                    width: '95%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    defaults: {
                        display: 'h',
                        align: 'center',
                        label: {
                            width: '100px'
                        },
                        element: {
                            type: 'textfield'
                        }
                    },
                    items: [  						
                        [{label: {text: '员工名称:'},element: userName},{label: {text: '出生年月:'},element: birthDate}], 
					    [{label: {text: '毕业院校:'},element: university},{label: {text: '性别:'},element: sex}], 
						[{label: {text: '个人爱好:'},element: interest,colspan: 2}]
					  ]                
                });
				personForm = new ctp.form({
                    id: 'personForm',
                    width: '100%', //宽度                   
                    items: [formLayout],
					validator:validator,
                    buttons: [{
                        id: 'submit',
                        text: '提交',
						icon:'apply',
                        onClick: formSubmit
                    }, {
                        id: 'reset',
						icon:'reload',
                        text: '重置',
						onClick: formReset
                    }]
                });
                personPanel=new ctp.ui.panel({
					id:'testPanel',
                    title: '个人信息录入',
					contentPadding:'5px 5px',
                    collapsible: true,
                    width: 'auto',
                    height: 'auto',
					align:'center',
					items:[personForm]
                });            
                button1=new ctp.ui.button({
                    id: 'button1',
                    text: '进行所有组件的验证',
                    width: '100%',
                    onClick: function(){
                       validator.submitValidate();
                    }
                });
                button2=new ctp.ui.button({
                    id: 'button2',
                    text: '刷新验证框架',
                    width: '100%',
                    onClick: function(){
					    validator.refresh();//一般在表单下组件有增删改的情况下使用                  
                    }
                });
                button3=new ctp.ui.button({
                    id: 'button3',
                    text: '暂停对<员工名称>校验',
                    width: '100%',
                    onClick: function(){                
						validator.stopValidate([userName]);
                    }
                });
               button4= new ctp.ui.button({
                    id: 'button4',
                    text: '启用对<员工名称>校验',
                    width: '100%',
                    onClick: function(){
                        validator.startValidate([userName]);
                    }
                });               
				button5= new ctp.ui.button({
                    id: 'button5',
                    text: '取得验证框架类型',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:validator.getCtpWebType()});
                    }
                });	
                button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '取得验证框架ID',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: validator.getId()
                        });
                    }
                }); 
				button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '取得验证框架名称',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: validator.getName()
                        });
                    }
                }); 
				button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '修改验证风格为直接提示模式',
                    width: '100%',
                    onClick: function(){
                        validator.changeStyle("direct");
                    }
                }); 
				button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '关闭员工姓名和出生年月提示信息',
                    width: '100%',
                    onClick: function(){
                        validator.closePrompt(["userName","birthDate"]);
                    }
                }); 
				showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[personPanel],
					width:'100%',
					height:'auto',
					align:'center',
					title:'效果展示区'						   
			     });
				buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7},{element: button8},{element: button9}]										
					]
                
                }); 
				buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					align:'center',
					title:'功能测试区'						   
			     });
				testPanel=new ctp.ui.panel({
                    title: 'ctp.validator实例',
                    collapsible: true,
                    width: '750px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });  
				//validator.stopValidate(userName);          
            });
        </script>
    </head>
    <BODY>
        <b>ctp.validator实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>
